<template>
	<div class="detail-container">
		<!-- 顶部导航 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <span>← 返回</span>
      </div>
      <span class="title">伙伴详情</span>
      <div class="placeholder"></div>
    </div>

	<div class="content">
		<!-- 未加载时显示占位提示，避免空白或报错 -->
    <div v-if="!partner" class="empty-state">
      <span class="empty-title">正在加载伙伴信息…</span>
      <span class="empty-sub">若长时间无响应，请返回重试</span>
    </div>

		<!-- 已加载伙伴后再渲染具体内容，防止初始空对象访问错误 -->
		<div v-else>
      <!-- 伙伴基础信息（无头像简洁版） -->
      <div class="partner-card partner-card--simple">
        <div class="info-section">
          <div class="name-row">
            <span class="partner-name" :class="'quality-' + partner.quality">{{ partner.name }}</span>
            <div class="star-rating">
              <span class="star" v-for="n in partner.star" :key="n">★</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 描述卡片：采用游历页面的卡片头部结构 -->
      <div class="desc-panel card">
        <div class="card-header">
          <div class="card-title">
            <h3>伙伴背景与简介</h3>
          </div>
        </div>
        <div class="card-content">
          <div class="meta-row desc-meta">
            <span class="meta-item">品阶：{{ getPevText(partner.quality) }}</span>
            <span class="meta-divider">|</span>
            <span class="meta-item">出身：{{ partner.source || '未知' }}</span>
            <span class="meta-divider">|</span>
            <span class="status-text" :class="{ active: partner.is_active }">{{ partner.is_active ? '已上阵' : '待命中' }}</span>
          </div>
          <span class="desc-text" v-if="partner.description">{{ partner.description }}</span>
          <span class="desc-text" v-else>暂无描述</span>
        </div>
      </div>

      <!-- 属性面板：卡片结构 + 单行属性项 -->
      <div class="attributes-panel card">
        <div class="card-header">
          <div class="card-title">
            <h3>属性</h3>
          </div>
        </div>
        <div class="card-content">
          <div class="attributes-list">
            <div class="attribute-row">
              <div class="attribute-left"><span class="attr-icon">⚔️</span><span class="attr-name">基础伤害</span></div>
              <span class="attr-value">{{ partner.attributes.baseDamage || 0 }}</span>
            </div>
            <div class="attribute-row">
              <div class="attribute-left"><span class="attr-icon">🛡️</span><span class="attr-name">防御</span></div>
              <span class="attr-value">{{ partner.attributes.defense }}</span>
            </div>
            <div class="attribute-row">
              <div class="attribute-left"><span class="attr-icon">❤️</span><span class="attr-name">生命</span></div>
              <span class="attr-value">{{ partner.attributes.health }}</span>
            </div>
            <div class="attribute-row">
              <div class="attribute-left"><span class="attr-icon">💨</span><span class="attr-name">速度</span></div>
              <span class="attr-value">{{ partner.attributes.speed }}</span>
            </div>
            <div class="attribute-row">
              <div class="attribute-left"><span class="attr-icon">💥</span><span class="attr-name">暴击率</span></div>
              <span class="attr-value">{{ partner.attributes.critRate || 0 }}%</span>
            </div>
            <div class="attribute-row">
              <div class="attribute-left"><span class="attr-icon">🎯</span><span class="attr-name">命中率</span></div>
              <span class="attr-value">{{ partner.attributes.hitRate || 95 }}%</span>
            </div>
          </div>
          <div class="power-display">
            <span class="power-label">战力:</span>
            <span class="power-value">{{ calculatePower(partner) }}</span>
          </div>
        </div>
      </div>

      <!-- 成长面板：卡片结构 -->
      <div class="growth-panel card">
        <div class="card-header">
          <div class="card-title">
            <h3>成长</h3>
          </div>
        </div>
        <div class="card-content">
          <div class="growth-list">
            <div class="growth-item"><span class="growth-name">生命成长：</span><span class="growth-value">{{ partner.growth.health }}</span></div>
            <div class="growth-item"><span class="growth-name">伤害成长：</span><span class="growth-value">{{ partner.growth.damage }}</span></div>
            <div class="growth-item"><span class="growth-name">防御成长：</span><span class="growth-value">{{ partner.growth.defense }}</span></div>
            <div class="growth-item"><span class="growth-name">速度成长：</span><span class="growth-value">{{ partner.growth.speed }}</span></div>
          </div>
        </div>
      </div>

      <!-- 技能面板：卡片结构 -->
      <div class="skills-panel card">
        <div class="card-header">
          <div class="card-title">
            <h3>技能</h3>
          </div>
        </div>
        <div class="card-content">
          <div class="skills-list">
            <div class="skill-item" v-for="skill in partner.skills" :key="skill.id">
              <div class="skill-header">
                <span class="skill-name">{{ skill.name }}</span>
                <span class="skill-type" :class="skill.type">{{ getSkillTypeText(skill.type) }}</span>
                <div class="skill-level-group">
                  <span class="skill-level">等级: {{ skill.level }}</span>
                  <div class="skill-up-btn" @click.stop="upgradeSkill(skill)">+</div>
                </div>
              </div>
              <span class="skill-desc">{{ skill.description }}</span>
              <div class="skill-stats">
                <span class="skill-stat">目标: {{ skill.target }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

			<!-- 操作按钮 -->
			<div class="action-buttons">
        <div class="action-btn upgrade-btn" @click="upgradePartner">
          <span class="btn-icon">⬆️</span>
          <span class="btn-text">升级</span>
        </div>
        <div class="action-btn starup-btn" @click="starUpPartner">
          <span class="btn-icon">⭐</span>
          <span class="btn-text">升星</span>
        </div>
        <div class="action-btn formation-btn" @click="goToFormation">
          <span class="btn-icon">⚔️</span>
          <span class="btn-text">布阵</span>
        </div>
			</div>
		</div> <!-- v-else 已加载 -->
	</div> <!-- content -->
</div> <!-- detail-container -->
</template>

<script>
export default {
	data() {
		return {
			partnerId: '',
			partner: null,
			loading: false
		}
	},
	onLoad(options) {
		this.partnerId = options.id || options.partnerId || '1001'
		// 检查登录状态后再加载数据
		console.log('onLoad called with partnerId:', this.partnerId)
		this.checkLoginAndLoad()
	},

	mounted() {
		console.log('mounted called')
		this.checkLoginAndLoad()
	},

	methods: {
		// 检查登录状态并加载数据
		checkLoginAndLoad() {
			console.log('checkLoginAndLoad called')
			const yid = (typeof uni !== 'undefined' ? uni.getStorageSync('yid') : localStorage.getItem('yid'))
			const userId = (typeof uni !== 'undefined' ? uni.getStorageSync('userId') : localStorage.getItem('userId'))
			
			if (!yid || !userId) {
				// 未登录，跳转到登录页
				if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				} else {
					alert('请先登录')
				}
				setTimeout(() => {
					if (typeof uni !== 'undefined' && typeof uni.reLaunch === 'function') {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					} else {
						window.location.hash = '/pages/login/index'
					}
				}, 1500)
				return
			}
			
			// 已登录，加载数据
			this.loadPartnerDetail()
		},

		// 加载伙伴详情
		async loadPartnerDetail() {
			this.loading = true

			try {
				// 使用新的API调用方式
				const api = await import('@/api')
				const result = await api.sectApi.getPartnerDetail(this.partnerId)
				const raw = (result && result.data) ? result.data : {}
				console.log('原始数据:', raw, result)
				this.partner = this.transformPartnerDetail(raw)
			} catch (error) {
				console.error('加载伙伴详情失败:', error)
				
				// 如果是登录相关错误，跳转到登录页
				if (error.message && (error.message.includes('登录') || error.message.includes('登陆'))) {
					uni.showToast({
						title: '登录已过期，请重新登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1500)
					return
				}
				
				uni.showToast({
					title: error.message || '网络错误',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 字段映射与统一
		transformPartnerDetail(raw) {
			const quality = raw.pev || 1
			return {
				id: raw.partner_id || raw.id || this.partnerId,
				name: raw.name || '未知伙伴',
				quality,
				star: quality, // 用品阶近似展示星级
				is_active: !!raw.is_up,
				description: raw.description || '',
				source: raw.source || '',
				avatar: raw.avatar || 'default-avatar.svg',
				growth: {
					health: raw.health_growth || 0,
					damage: raw.damage_growth || 0,
					defense: raw.defense_growth || 0,
					speed: raw.speed_growth || 0
				},
				attributes: {
					health: raw.health || 0,
					defense: raw.defense || 0,
					speed: raw.speed || 0,
					baseDamage: raw.baseDamage || 0,
					damageIncrease: raw.damageIncrease || 0,
					damageReduction: raw.damageReduction || 0,
					critRate: raw.critRate || 0,
					abnormalResist: raw.abnormalResist || 0,
					controlSuccess: raw.controlSuccess || 0,
					dodgeRate: raw.dodgeRate || 0,
					hitRate: raw.hitRate || 0
				},
				skills: Array.isArray(raw.skill_list) ? raw.skill_list.map(s => ({
					id: s.skill_id,
					level: s.skill_level || 1,
					name: s.name || '未知技能',
					type: s.type || '通用',
					description: s.desc || '',
					target: s.target || '未知目标'
				})) : []
			}
		},

		// 技能升级
		async upgradeSkill(skill) {
			try {
				const api = await import('@/api')
				const payload = { skill_id: skill.id }
				if (this.partner && this.partner.id) {
					payload.partner_id = this.partner.id
				}
				const res = await api.character.upgradeSkill(payload)
				if (res && res.code === 1) {
					uni.showToast && uni.showToast({ title: '升级成功', icon: 'success' })
					this.loadPartnerDetail()
				} else {
					uni.showToast && uni.showToast({ title: (res && res.msg) || '升级失败', icon: 'none' })
				}
			} catch (e) {
				console.error('技能升级失败:', e)
				uni.showToast && uni.showToast({ title: '网络错误', icon: 'none' })
			}
		},

		// 升级伙伴
		async upgradePartner() {
			try {
				// 使用新的API调用方式
				const api = await import('@/api')
				const result = await api.sectApi.upgradePartner(this.partnerId)
				
				uni.showToast({
				title: '升级成功',
				icon: 'success'
			})
			this.partner = result.data
		} catch (error) {
			console.error('升级伙伴失败:', error)
			uni.showToast({
				title: error.message || '网络错误',
				icon: 'none'
			})
		}
		},

		// 升星伙伴
		async starUpPartner() {
			try {
				// 使用新的API调用方式
				const api = await import('@/api')
				const result = await api.sectApi.starUpPartner(this.partnerId)
				
				uni.showToast({
				title: '升星成功',
				icon: 'success'
			});
			this.partner = result.data;
		} catch (error) {
			console.error('升星伙伴失败:', error);
			uni.showToast({
				title: error.message || '网络错误',
				icon: 'none'
			});
		}
		},

		// 返回上一页
		goBack() {
			if (typeof uni !== 'undefined' && typeof uni.navigateBack === 'function') {
				uni.navigateBack();
			} else if (window.history.length > 1) {
				window.history.back()
			} else {
				window.location.hash = '/pages/partner/index'
			}
		},

		// 跳转到布阵页
		goToFormation() {
			uni.navigateTo({
				url: '/pages/partner/formation'
			});
		},

		// 获取头像URL
		getAvatarUrl(avatar) {
			if (!avatar) return '/static/default-avatar.svg'
			// 如果是默认或带扩展名的简单文件名，直接走 /static
			if (avatar.includes('.') && !avatar.includes('/')) {
				return `/static/${avatar}`
			}
			// 其他情况按 avatars 目录组织
			return `/static/avatars/${avatar}`
		},

		// 获取类型文本
		getTypeText(type) {
			const typeMap = {
				tank: '坦克',
				damage: '输出',
				healer: '治疗',
				control: '控制'
			};
			return typeMap[type] || type;
		},

		// 获取位置文本
		getPositionText(position) {
			const positionMap = {
				front1: '前排左',
				front2: '前排右',
				middle: '中排',
				back: '后排'
			};
			return positionMap[position] || position;
		},

		// 获取技能类型文本
		getSkillTypeText(type) {
			const typeMap = {
				active: '主动',
				passive: '被动'
			};
			return typeMap[type] || type;
		},

		// 品阶文本
		getPevText(pev) {
			const map = {
				1: '一阶',
				2: '二阶',
				3: '三阶',
				4: '四阶',
				5: '五阶'
			}
			return map[pev] || `${pev}阶`
		},

		// 计算战力
		calculatePower(partner) {
			const attributes = partner.attributes;
			const baseDamage = attributes.baseDamage || attributes.attack || 0;
			const defense = attributes.defense || 0;
			const health = attributes.health || 0;
			const speed = attributes.speed || 0;
			const critRate = attributes.critRate || 0;
			const hitRate = attributes.hitRate || 95;
			
			// 基础战力 = 基础伤害 * 2 + 防御 + 生命 * 0.5 + 速度 + 暴击率 * 10 + 命中率 * 2
			const basePower = baseDamage * 2 + defense + health * 0.5 + speed + critRate * 10 + hitRate * 2;
			return Math.floor(basePower * (1 + partner.star * 0.1));
		},
	}
}
</script>

<style scoped>
/* ========== 武侠风格伙伴详情 ========== */
.detail-container {
  padding: 0;
  background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%);
  min-height: 100vh;
  font-family: "STSong", "Noto Serif SC", serif;
}

/* 顶部导航栏 - 武侠风格 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid #c4a57b;
  box-shadow: 0 4rpx 24rpx rgba(139, 111, 71, 0.3);
}

.back-btn {
	font-size: 32rpx;
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: white;
	border: 2px solid #4b3a2a;
	transition: all 0.3s ease;
	font-weight: 600;
}

.back-btn:active {
	transform: scale(0.95);
	box-shadow: 0 2px 8px rgba(75, 58, 42, 0.3);
}

.title {
	font-size: 36rpx;
	font-weight: 700;
	color: #4a3c2a;
	letter-spacing: 2px;
	text-shadow: 0 1px 2px rgba(139, 111, 71, 0.2);
}

.placeholder {
	width: 80rpx;
}

/* 内容区域 */
.content {
	padding: 30rpx;
	padding-bottom: 140rpx;
}

/* 空状态占位 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 30rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
	border: 1rpx solid rgba(0,0,0,0.05);
}
.empty-title {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 12rpx;
}
.empty-sub {
	font-size: 26rpx;
	color: #666;
}

/* 伙伴基础信息卡片 - 武侠风格 */
.partner-card {
  display: flex;
  padding: 32rpx;
  margin-bottom: 28rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22rpx;
  box-shadow: 0 8rpx 28rpx rgba(139, 111, 71, 0.3);
  border: 3px solid #c4a57b;
}

.partner-card--simple .name-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 14rpx;
  margin-top: 12rpx;
  color: #6b4f3b;
}
.meta-item { font-size: 26rpx; }
.meta-divider { color: rgba(122,59,0,0.35); }
.desc-row { margin-top: 12rpx; }
.desc-text { font-size: 26rpx; color: #555; }

.avatar-section {
	margin-right: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.partner-avatar {
	position: relative;
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
}

.avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
}

.quality-border {
	position: absolute;
	top: -6rpx;
	left: -6rpx;
	right: -6rpx;
	bottom: -6rpx;
	border: 5rpx solid;
	border-radius: 26rpx;
	pointer-events: none;
	animation: qualityGlow 2s ease-in-out infinite alternate;
}

@keyframes qualityGlow {
	0% { box-shadow: 0 0 10rpx currentColor; }
	100% { box-shadow: 0 0 20rpx currentColor; }
}

.quality-border.quality-1 { border-color: #cccccc; }
.quality-border.quality-2 { border-color: #00ff00; }
.quality-border.quality-3 { border-color: #0080ff; }
.quality-border.quality-4 { border-color: #8000ff; }
.quality-border.quality-5 { border-color: #ff8000; }
.quality-border.quality-6 { border-color: #ff0000; }

.star-rating {
	display: flex;
	gap: 4rpx;
	justify-content: center;
}

.star {
	color: #ffd700;
	font-size: 28rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	filter: drop-shadow(0 0 4rpx #ffd700);
}

/* 信息区域 */
.info-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.name-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
}

.partner-name {
    font-size: 44rpx;
    font-weight: bold;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.star-rating {
  display: inline-flex;
  margin-left: 12rpx;
}

.partner-name.quality-1 { color: #666666; }
.partner-name.quality-2 { color: #00aa00; }
.partner-name.quality-3 { color: #0066cc; }
.partner-name.quality-4 { color: #6600cc; }
.partner-name.quality-5 { color: #cc6600; }
.partner-name.quality-6 { color: #cc0000; }

.partner-type {
	font-size: 26rpx;
	color: #ffffff;
	padding: 8rpx 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.level-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.level-text {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
}

.exp-text {
	font-size: 28rpx;
	color: #666666;
}

.status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status-text {
	font-size: 26rpx;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	font-weight: bold;
	background-color: #f0f0f0;
	color: #999999;
}

.status-text.active {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(79, 172, 254, 0.3);
}

.position-text {
	font-size: 24rpx;
	color: #666666;
	background: #f8f9fa;
	padding: 6rpx 16rpx;
	border-radius: 15rpx;
}

/* 属性面板 */
.attributes-panel, .skills-panel {
  margin-bottom: 28rpx;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

.panel-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	padding-bottom: 15rpx;
	border-bottom: 3rpx solid #f0f0f0;
	position: relative;
}

.panel-title::after {
  content: '';
  position: absolute;
  bottom: -3rpx;
  left: 0;
  width: 60rpx;
  height: 3rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2rpx;
}

/* 通用卡片结构（参考游历页面） */
.card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  margin-bottom: 28rpx;
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.card-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: white;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
}
.desc-icon { background: linear-gradient(135deg, #fbd786 0%, #f7797d 100%); }
.attr-card-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.growth-card-icon { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); }

.desc-meta {
  margin-bottom: 16rpx;
}
.skills-card-icon { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }
.icon-text { font-size: 24rpx; }
.card-title h3 {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin: 0 0 6rpx 0;
}
.card-title p { font-size: 26rpx; color: #666; margin: 0; }
.card-content { margin-top: 10rpx; }

.attributes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  margin-bottom: 30rpx;
}

/* 属性单行列表样式 */
.attributes-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-bottom: 22rpx;
}
.attribute-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 18rpx;
  background: rgba(102, 126, 234, 0.06);
  border-radius: 14rpx;
  border: 1rpx solid rgba(102, 126, 234, 0.18);
}
.attribute-left { display: flex; align-items: center; gap: 12rpx; }
.attributes-list .attr-icon { font-size: 30rpx; }
.attributes-list .attr-name { font-size: 28rpx; color: #555; font-weight: 500; }
.attributes-list .attr-value { font-size: 30rpx; font-weight: bold; color: #333; }

.attr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26rpx 18rpx;
  background: linear-gradient(135deg, #fff7e6 0%, #fdebd1 100%);
  border-radius: 18rpx;
  box-shadow: 0 4rpx 14rpx rgba(252, 182, 159, 0.18);
  transition: all 0.3s ease;
}

.attr-item:active {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(252, 182, 159, 0.4);
}

.attr-icon {
	font-size: 36rpx;
	margin-bottom: 12rpx;
	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
}

.attr-name {
	font-size: 26rpx;
	color: #666666;
	margin-bottom: 8rpx;
	font-weight: 500;
}

.attr-value {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 战力显示 */
.power-display {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22rpx;
  background: linear-gradient(135deg, #ffe7c8 0%, #f7c7b3 100%);
  border-radius: 18rpx;
  color: #7a3b00;
  box-shadow: 0 6rpx 20rpx rgba(122, 59, 0, 0.1);
}

.power-label {
	font-size: 30rpx;
	margin-right: 15rpx;
	font-weight: 500;
}

.power-value {
	font-size: 40rpx;
	font-weight: bold;
	color: #ffd700;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	filter: drop-shadow(0 0 8rpx #ffd700);
}

/* 技能面板 */
.skills-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.skill-item {
  padding: 28rpx;
  background: linear-gradient(135deg, #fff7e6 0%, #fdebd1 100%);
  border-radius: 18rpx;
  box-shadow: 0 4rpx 14rpx rgba(252, 182, 159, 0.18);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

.skill-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.skill-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.skill-type {
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 15rpx;
	color: white;
	font-weight: bold;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.skill-type.active {
	background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
	box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
}

.skill-type.passive {
	background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
	box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
}

/* 技能等级与升级按钮 */
.skill-level-group {
	display: flex;
	align-items: center;
	gap: 12rpx;
}
.skill-level {
	font-size: 24rpx;
	color: #333;
}
.skill-up-btn {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: #ffd166;
  color: #7a3b00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx rgba(122, 59, 0, 0.2);
}

.skill-desc {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 15rpx;
	background: rgba(255, 255, 255, 0.6);
	padding: 15rpx;
	border-radius: 12rpx;
}

.skill-stats {
	display: flex;
	gap: 30rpx;
}

.skill-stat {
	font-size: 24rpx;
	color: #999999;
	background: rgba(255, 255, 255, 0.8);
	padding: 8rpx 16rpx;
	border-radius: 10rpx;
}

/* 成长面板 */
.growth-panel {
  margin-bottom: 28rpx;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}
.growth-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.growth-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10rpx;
  padding: 12rpx 16rpx;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12rpx;
}
.growth-name {
	color: #666;
}
.growth-value {
  color: #111;
  font-weight: bold;
}

/* 描述卡片样式与其它面板保持一致 */
.desc-panel {
  margin-bottom: 28rpx;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  left: 30rpx;
  right: 30rpx;
  display: flex;
  gap: 20rpx;
  z-index: 100;
}

.action-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx 20rpx;
	border-radius: 20rpx;
	color: white;
	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	backdrop-filter: blur(10rpx);
}

.action-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
}

.upgrade-btn {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.starup-btn {
	background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.formation-btn {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.btn-icon {
	font-size: 36rpx;
	margin-bottom: 10rpx;
	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
}

.btn-text {
	font-size: 26rpx;
	font-weight: bold;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

/* 加载状态 */
.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
	font-size: 32rpx;
	color: #999999;
	background: #ffffff;
	border-radius: 24rpx;
	margin: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media screen and (max-width: 750px) {
	.partner-card {
		flex-direction: column;
		text-align: center;
	}
	
	.avatar-section {
		margin-right: 0;
		margin-bottom: 30rpx;
	}
	
	.attributes-grid {
		grid-template-columns: 1fr;
	}

	.action-buttons {
		flex-direction: column;
		gap: 15rpx;
	}

  .content {
    padding-bottom: 160rpx;
  }
}

@media screen and (max-width: 600px) {
	.content {
		padding: 20rpx;
	}

	.partner-card, .attributes-panel, .skills-panel, .growth-panel, .desc-panel {
		padding: 30rpx;
	}

	.header {
		padding: 20rpx;
	}

  .panel-title { font-size: 32rpx; }
  .partner-name { font-size: 40rpx; }
  .attr-value { font-size: 30rpx; }
  .skill-name { font-size: 30rpx; }
}
</style>